<template>
    <div class="homepage-hero-module">
        <div class="video-container">
            <div :style="fixStyle" class="filter"></div>
            <video :style="fixStyle" autoplay loop class="fillWidth" muted='muted' v-on:canplay="canplay">
                <source src="..\public\yuan.mp4" type="video/mp4" />
            </video>
            <div class="poster hidden" v-if="!vedioCanPlay">
                <img :style="fixStyle" src="" alt="">
            </div>
            <div class="login11">
                <div class="avatar_box">
                    <img src="..\public\qqqq.png" alt="" />
                </div>
                <!-- 登录模块 -->
                <div v-show="showLogin" class="login-1">
                    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="5%" class="demo-ruleForm">
                        <el-form-item prop="userPhone">
                            <el-input v-model="ruleForm.userPhone" autocomplete="off" placeholder="手机号" prefix-icon="el-icon-user"></el-input>
                        </el-form-item>
                        <el-form-item prop="userPwd">
                            <el-input type="password" v-model="ruleForm.userPwd" autocomplete="off" placeholder="输入6-18位登录密码" prefix-icon="el-icon-lock"></el-input>
                        </el-form-item>

                        <div class="login-yes2">
                            <el-checkbox v-model="checked">
                                我已阅读并同意 &nbsp;&nbsp;<a href="" style="text-decoration: none">《用户隐私政策》</a></el-checkbox>
                        </div>
                        <div class="buttond">
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>

                                <el-button @click="ToRegister()">注册</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>

                <!-- 注册模块 -->
                <div v-show="showRegister">
                    <el-form :model="register" status-icon :rules="rules" ref="register">
                        <div class="login-2">
                            <el-form-item prop="userNick" class="pr">
                                <el-input style="width: 70%; margin: 0% 10%" v-model="register.userNick" placeholder="用户名" prefix-icon="el-icon-user" autocomplete="off" clearable></el-input>
                            </el-form-item>

                            <el-form-item prop="userPhone" class="pr">
                                <el-input style="width: 70%; margin: 0% 10%" v-model="register.userPhone" placeholder="手机号" prefix-icon="el-icon-user" autocomplete="off" clearable></el-input>
                            </el-form-item>
                            <el-form-item prop="code">
                                <el-input style="width: 45%; margin: 0% 10%" v-model.number="register.code" placeholder="短信验证码" prefix-icon="el-icon-user" clearable></el-input>
                                <button style=" border-radius: 5px; border: none; background-color: #fff; margin-right: 10px;   width: 20%; height: 38px; " @click.prevent="getShortMessageCode()" :class="{ code_btn: ppt, code_btn1: !ppt }" :disabled="!show">
                                    <span v-show="show">验证码</span>
                                    <span v-show="!show">{{ count }} 秒后重发</span>
                                </button>
                            </el-form-item>

                            <el-form-item prop="userPwd">
                                <el-input style="width: 70%; margin: 0% 10%" placeholder="设置6-18位登录密码" v-model="register.userPwd" autocomplete="off" prefix-icon="el-icon-lock" show-password></el-input>
                            </el-form-item>
                            <el-form-item prop="checkPass">
                                <el-input type="password" style="width: 70%; margin: 0% 10%" placeholder="请再次输入密码" v-model="register.checkPass" autocomplete="off" prefix-icon="el-icon-lock"></el-input>
                            </el-form-item>

                        </div>
                    </el-form>
                    <div class="login-yes1">
                        <el-checkbox v-model="checked">
                            我已阅读并同意 &nbsp;&nbsp;&nbsp;<a href="" style="text-decoration: none">《用户隐私政策》</a></el-checkbox>
                    </div>
                    <div class="div-button1">
                        <el-button type="primary" @click="zuce()">注册</el-button>
                        <el-button @click="ToLogin()">登录</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
    name: 'login',
    data() {
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("验证码不能为空"));
            }
        };
        var validatePass = (rule, value, callback) => {
            var reg1 = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/; //手机号验证wesrdhfhgsd
            if (value === '') {
                callback(new Error('请输入手机号'));
            } else if (!reg1.test(value)) {
                callback(new Error("请正确输入手机号"));
            }
            else {
                callback();
            }
        };
        var validatePass1 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入账号"));
            } else {
                if (this.register.userNick !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            var reg1 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,15}$/; //密码必须是8位以上、必须含有字母、数字、特殊符号
            if (value === "") {
                callback(new Error("请输入密码"));
            } else if (!reg1.test(value)) {
                callback(new Error("密码必须是8位以上、必须含有字母、数字"));
            } else {
                callback();
            }
        };
        var validatePass3 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.register.userPwd) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            vedioCanPlay: false,
            fixStyle: '',
            // // 键盘
            //  docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
            //         showHeight: document.documentElement.clientHeight,   //实时屏幕高度
            //         hidshow:true , //显示或者隐藏footer
            /////////
            checked: false,
            show: true,
            timer: 0,
            count: 0,
            ppt: true, //点击时改变样式
            // 登录页面默认显示为true
            showLogin: true,
            // 注册页面默认隐藏为false
            showRegister: false,
            ruleForm: {
                userPhone: "",
                userPwd: "",
            },
            register: {
                userPhone: "",
                userPwd: "",
                code: "",
                checkPass: "",
                userNick: ""
            },
            rules: {
                userNick: [{ validator: validatePass1, trigger: "blur" }],
                userPhone: [{ validator: validatePass, trigger: "blur" }],
                userPwd: [{ validator: validatePass2, trigger: "blur" }],
                checkPass: [{ validator: validatePass3, trigger: "blur" }],
                code: [{ validator: checkAge, trigger: "blur" }],
            },
        }
    },
    methods: {
        canplay() {
            this.vedioCanPlay = true
        },
        submitForm() {
            if (this.checked === false) {
                this.$message({
                    type: "warning",
                    message: "请同意服务条款",
                });
                return;
            } else if (
                this.ruleForm.userPhone === "" ||
                this.ruleForm.userPwd === ""
            ) {
                this.$message({
                    type: "warning",
                    message: "请正确输入用户信息",
                });
                return;
            } else {
                axios({
                    url: "/api/user/loginuser",
                    method: "POST",
                    params: this.ruleForm,
                }).then((res) => {
                    console.log(res);
                    if (res.data.code === 200) {
                        this.$message({
                            type: "success",
                            message: "登陆成功",
                        });
                        //登录成功 进入首页
                        this.$router.push({
                            name: "index" + "",
                            params: { user: this.ruleForm },
                        });

                        localStorage.setItem("user", JSON.stringify(res.data.data));
                    } else if (res.data.code === 251) {
                        this.$message({
                            type: "error",
                            message: "密码错误，请重新获取!",
                        });
                    }
                });
            }
        },
        // 获取短信验证码
        getShortMessageCode() {
            if (this.register.userPhone === "") {
                this.$message.error('手机号都没发什么！！！！');
                return;
            } else {
                this.ppt = !this.ppt;
                console.log(1111111111111);
                console.log(!this.timer);
                // 验证码倒计时
                if (!this.timer) {
                    console.log(this.timer);
                    this.count = 60;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= 60) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                            this.ppt = !this.ppt;
                        }
                    }, 1000);
                }
                axios({
                    url: "/api/user/sendCode",
                    method: "POST",
                    params: {
                        phone: this.register.userPhone,
                    },
                }).then((res) => {
                    console.log(res);
                    if (res.data.code === 200) {
                        this.$message({
                            type: "success",
                            message: "发送成功,请注意查收",
                        });
                    } else if (res.data.code === 251) {
                        this.$message({
                            type: "error",
                            message: "发送失败,检查网络问题",
                        });
                    }
                });
            }

        },
        zuce() {
            if (this.checked === false) {
                this.$message({
                    type: "warning",
                    message: "请同意服务条款",
                });
                return;
            } else if (
                this.register.userPhone === "" ||
                this.register.userPwd === "" ||
                this.register.code === ""
            ) {
                this.$message({
                    type: "warning",
                    message: "请正确输入用户信息",
                });
                return;
            } else if (this.register.checkPass === this.register.userPwd) {
                axios({
                    url: "/api/user/registerUser",
                    method: "POST",
                    params: this.register,
                }).then((res) => {
                    console.log(res);
                    if (res.data.code === 200) {
                        this.$message({
                            type: "success",
                            message: "恭喜成功注册极美",
                        });
                        (this.showRegister = false), (this.showLogin = true);
                        console.log(res);
                        localStorage.setItem("user", JSON.stringify(res.data.data));
                    } else if (res.data.code === 252) {
                        this.$message({
                            type: "error",
                            message: "验证码错误，请重新获取!",
                        });
                    } else if (res.data.code === 253) {
                        this.$message({
                            type: "error",
                            message: "请重新获取验证码!",
                        });
                    }
                });

            } else {
                this.$message({
                    type: "error",
                    message: "两次密码不一致",
                });
            }
        },
        //可将登录与注册的都写在一起我这里为了方面演示，将其分开了
        // 跳转至注册页面，点击后showRegister就为显示页面了
        //showLogin就为隐藏页面了
        ToRegister() {
            (this.showRegister = true), (this.showLogin = false);
        },
        // 跳转至登录页面，点击后注册页面就为隐藏页面
        //登录页面就为显示页面了
        ToLogin() {
            (this.showRegister = false), (this.showLogin = true);
        },
    },
    mounted() {
        window.onresize = () => {
            const windowWidth = document.body.clientWidth
            const windowHeight = document.body.clientHeight
            const windowAspectRatio = windowHeight / windowWidth
            let videoWidth
            let videoHeight
            if (windowAspectRatio < 0.5625) {
                videoWidth = windowWidth
                videoHeight = videoWidth * 0.5625
                this.fixStyle = {
                    height: windowWidth * 0.5625 + 'px',
                    width: windowWidth + 'px',
                    'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
                    'margin-left': 'initial'
                }
            } else {
                videoHeight = windowHeight
                videoWidth = videoHeight / 0.5625
                this.fixStyle = {
                    height: windowHeight + 'px',
                    width: windowHeight / 0.5625 + 'px',
                    'margin-left': (windowWidth - videoWidth) / 2 + 'px',
                    'margin-bottom': 'initial'
                }
            }
        }
        window.onresize()
    }
}
</script>
<style lang="less" scoped>
.div-button1 {
    float: left;
    margin: 0% 20%;
}
.avatar_box {
    height: 30%;
    width: 90%;
    padding: 10px;
    margin-top: 20px;
    margin-left: 10px;

    float: left;

    img {
        width: 100%;
        height: 100%;
    }
}
.login-yes1 {
    float: left;
    margin: 0% 20%;
}
.login-2 {
    float: left;
    position: relative;
    margin-left: 40px;
}
.login-yes2 {
    float: left;
}
.login-1 {
    float: left;
    background-color: transparent;
    margin: 8% 20%;
    padding: 10px;
    width: 50%;
    height: 10%;
}
.login11 {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
}
.video-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    z-index: 9;
    height: 100vh;
    background-color: #fff;

    overflow-y: auto;
}

.video-container .poster img,
.video-container video {
    z-index: 0;
    position: absolute;
}

.video-container .filter {
    z-index: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
}
</style>
